<template>
    <div class="box">
            <el-button style = "width: 50%" type="primary" @click="updatePasw(1)">修改密码</el-button>
            <div style="width: 50%">
                <el-button style = "width: 100%" type="primary" @click="updatePasw(2)">修改地址</el-button>
                <div>我的地址：{{user.address}}</div>
            </div>
            <div style="width: 50%">
                <el-button style = "width: 100%" type="primary" @click="updatePasw(3)">修改服务器</el-button>
                <div>我的服务器：{{user.fwq}}</div>
            </div>
            <el-button style = "width: 50%" type="primary" @click="this.$router.push('/login')">退出登录</el-button>
    </div>
<!--    修改密码-->
    <el-dialog v-model="dialogVisible1" title="修改密码" width="90%">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="密码">
                <el-input  v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input  v-model="form.confirm" show-password></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="noup(1)" >取消</el-button>
                        <el-button type="primary" @click="register()">确认</el-button>
                    </span>
        </template>
    </el-dialog>
<!--    修改地址-->
    <el-dialog v-model="dialogVisible2" title="修改地址" width="90%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="地址">
                <el-input type="textarea" v-model="form.address" style="width: 80%"/>
            </el-form-item>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="noup(2)">取消</el-button>
                        <el-button type="primary" @click="register()">确认</el-button>
                    </span>
        </template>
    </el-dialog>
<!--    修改服务器-->
    <el-dialog v-model="dialogVisible3" title="修改服务器" width="90%">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-select v-model="form.fwq" placeholder="请选择服务器">
                <el-option
                        v-for="item in fwqdata"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="noup(3)">取消</el-button>
                        <el-button type="primary" @click="register()">确认</el-button>
                    </span>
        </template>
    </el-dialog>
</template>

<script>
    import request from "../../network/request";
    import fwq from "../../assets/js/fwq";
    export default {
        name: "UserSZ",
        data(){
            return{
                fwqdata:fwq,
                form:{},
                dialogVisible1 : false,dialogVisible2 : false,dialogVisible3 : false,
                user:JSON.parse(sessionStorage.getItem("user")),
            }
        },
        created() {
            this.form.fwq = this.user.fwq
        },
        methods:{
            noup(tcxl){
                this.form = {}
                if (tcxl == 1){
                    this.dialogVisible1 = false
                }else if (tcxl==2){
                    this.dialogVisible2 = false
                }else if (tcxl==3){
                    this.dialogVisible3 = false
                }
            },
            updatePasw(tcxl){
                if (tcxl == 1){
                    this.dialogVisible1 = true
                }else if (tcxl==2){
                    this.dialogVisible2 = true
                }else if (tcxl==3){
                    this.dialogVisible3 = true
                }
            },
            register(){
                this.form.id = JSON.stringify(this.user.id)
                if (this.form.password !== this.form.confirm) {
                    this.$message({
                        type:"error",
                        message:'俩次密码不一致！'
                    })
                    return
                }
                this.$refs['form'].validate((valid) => {        //发送请求前校验,如是否非空
                    if (valid) {
                       if(this.form.id){
                           request.put("/user",this.form).then(res => {
                               if (res.code == '0') {
                                   this.$message({
                                       type:"success",
                                       message:"设置成功"
                                   })
                                   this.dialogVisible1 = false
                                   this.dialogVisible2 = false
                                   this.dialogVisible3 = false
                                   this.$router.push("/login")      //成功后进行页面跳转
                               } else {
                                   this.$message({
                                       type: "error",
                                       message:res.msg
                                   })
                               }
                           })
                       }else {
                           this.dialogVisible1 = false
                           this.dialogVisible2 = false
                           this.dialogVisible3 = false
                       }
                    }else {console.log('123')}
                })
            }
        }
    }
</script>

<style scoped>
    .box{
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
    }
</style>